<template>
  <div class="hello">
    <header>
     <router-link to='reg'>
         <p>
            <img src="../assets/img/fanhui.png">
            <span>其他设置</span>
         </p>
     </router-link>
      
      <h2>账号</h2>
    </header>
    <main>
      <p>登陆后即可订阅播客，下载节目<span>立即登陆/登陆</span></p>
      <h3>其他</h3>
      <h4>使用帮助</h4>
      <h5>反馈建议</h5>
      <ul>
        <li>联系我们</li>
        <li>检查更新</li>
        <li>给荔枝FM评分</li>
        <li>关于荔枝FM</li>
      </ul>
    </main>
    <footer class="footer">
      <p>退出程序</p>
    </footer>
    
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '.././assets/less/style.less';

header{
  p{
    .px2rem(height, 100);
    .px2rem(line-height, 100);
    img{
       .padding-left(20);
       .px2rem(height, 24);
       .px2rem(height, 24);
    }
    span{
      .font(28,#474747);
      .padding-left(20);
    }
  }
  h2{
    .font(24, #ff5b5b);
    .padding-left(20);
    .padding-top(96);
  }
}
main{
  .padding-left(20);
  p{
    .font(24, #bbb);
    .webkit();
     .padding-top(30);
     .padding-bottom(135);
  }
  span{
    display: block;
    .px2rem(height, 66);
    .px2rem(width, 170);
    border: 1px solid #ccc;
    background: #fefcf0;
    .margin-left(184);
    .font(22, #bbb);
    .line-height(66);
    text-align: center;
  }
  h3{
    .font(24,#ff5b5b);
    .padding-bottom(66);
  }
  h4{
    .font(28,#5b5b5b);
    .padding-bottom(85);
  }
  h5{
    .font(28,#5b5b5b);
    .padding-bottom(42);
  }
  ul{
    .font(26,#5b5b5b);
    li{
      .px2rem(height, 110);
      .px2rem(line-height,110);
      .border-top(1,solid, #e5e5e5);
    }
    li:nth-child(1){
      .border-top(1,solid, #cecece);
    }  
    li:nth-child(4){
      .border-bottom(1,solid, #e5e5e5);
    }  
  }
}
.footer{
  .px2rem(height, 78);
  .px2rem(width, 664);
  .border(1,solid, #000);
  .border-radius(10);
  .margin-top(42);
  .margin-left(30);
  p{
   .font(28, #000); 
   .line-height(78);
   text-align: center;
  }
}
  


</style>
